import { Col, Row, Space } from 'antd'

import { popupSlot } from './components/AddEvent/utils'
import { AttachmentInfosDetail } from './components/AttachmentInfos'
import { BaseInfo } from './components/BaseInfo'
import { ContainerNumber } from './components/ContainerNumber'
import { DeliveryReservation } from './components/DeliveryReservation'
import { EventInfo } from './components/EventInfo'
import LogisticsInfo from './components/LogisticsInfo'
import { ProductInfo } from './components/ProductInfo'
import { RelevantPersonnel } from './components/RelevantPersonnel'
import { Remarks } from './components/Remarks'
import { ScheduleInfo } from './components/ScheduleInfo'
import { StatusOverview } from './components/StatusOverview'
import { Transportation } from './components/Transportation'
import { WarehouseInfo } from './components/WarehouseInfo'
import { useDetail } from './useDetail'
import styles from './styles.module.less'

export const Detail = () => {
  useDetail()

  return (
    <div className={styles.box}>
      <BaseInfo />
      <ScheduleInfo />
      <div className={styles.box_content}>
        <Row gutter={16}>
          <Col span={16}>
            <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
              <Row gutter={16}>
                <Col span={12}>
                  <StatusOverview />
                </Col>
                <Col span={12}>
                  <EventInfo />
                </Col>
              </Row>
              <Remarks />
              <ProductInfo />
              <DeliveryReservation />
              <ContainerNumber />
              <AttachmentInfosDetail />
            </Space>
          </Col>
          <Col span={8}>
            <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
              <RelevantPersonnel />
              <LogisticsInfo />
              <Transportation />
              <WarehouseInfo />
            </Space>
          </Col>
        </Row>
      </div>
      <popupSlot.Slot />
    </div>
  )
}
